<template>
  <div class="service">
    <van-nav-bar title="服务" left-arrow @click-left="back" />
    <van-tabs v-model="active" @click="tabChange">
      <van-tab :title="item.name" v-for="(item,index) in functions" :key="index"></van-tab>
    </van-tabs>
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getList">
      <div class="service_list">
        <div class="lists">
          <div @click="toDetail(item)" class="home_service__item flex" v-for="(item ,index) in dataList" :key="index">
            <div class="bg" :class="['type1']" :style="{backgroundImage:`url(${item.imgUrl})`}"></div>
            <div class="infor">
              <h4 class="name">{{item.goodsName}}</h4>
              <p class="descp">{{item.goodsIntroduction}}</p>
              <p class="num row-between-center ">
                <span class="price">{{item.currentPrice}}<small>{{item.originalPrice}}</small></span>
                <span class="salenum">已售{{item.sellNum}}份</span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </van-list>
  </div>
</template>
<script>
import api from 'api/api'
import { mapState } from 'vuex'
export default {
  data () {
    return {
      active: 0,
      loading: false,
      finished: false,
      form: {
        data: {
          // regionId: '',

          // limit: 10
          regionId: "",
          categoryId: "1"
        },
        page: 0,
      },
      functions: [
        { name: '法律事务', regionId: '', },
        { name: '征信服务', regionId: '', },
        { name: '知识产权', regionId: '', },
        { name: '财税服务', regionId: '', },
        // { name: '中国黄页', regionId: '', },
        { name: '保险服务', regionId: '', },
        { name: '资质办理', regionId: '', },
        { name: 'Boss靓号', regionId: '', },
        // { name: '行业精英', regionId: '', },
        // { name: '人才招聘', regionId: '', }
      ],
      dataList: [],
      pages: 0
    }
  },
  computed: {
    ...mapState(['categoryList'])
  },
  created () {
    // console.log(this.$route.query.active)
    if (this.$route.query.active) {
      this.active = parseInt(this.$route.query.active)
    }
	
    this.getList()
  },
  methods: {
    getList () {
      // if (!this.finished && !this.loading) {
      this.form.page++
      if (JSON.parse(localStorage.getItem('city'))) {
        this.form.data.regionId = JSON.parse(localStorage.getItem('city')).value[1].code
      }
	  
// return
console.log(this.categoryList)
      this.loading = true;
     if(this.categoryList.length>0){
		  this.form.data.categoryId = this.categoryList[this.active].id
	 }
	 else{
		 this.form.data.categoryId=this.active+2
	 }
      api.goodsList(this.form).then(res => {
        console.log('resss', res)
        this.loading = false;
        console.log(this.loading)
        this.dataList = this.dataList.concat(res.data.records)
        this.pages = res.data.pages
        console.log(this.form.data.page, this.total)
        if (this.form.page > this.pages - 1) {
          console.log(this.finished)
          this.finished = true
        }
      })
      // }
    },
    tabChange () {
      console.log(this.active)
      this.dataList = []
      this.form.data.page = 0
      this.form.page = 0
      this.loading = false
      this.finished = false
      this.getList()
    },
    toDetail (item) {
      console.log(item)
      // return
      this.$router.push('/service/good/' + item.id)
    },
    back () {
      // window.history.go(-1)
      this.$router.push('/home')
    }
  }
}
</script>

<style lang="scss">
.service {
  .van-tabs__line {
    background-color: #348aff;
  }
  .service_list {
    padding: 0.3rem;
    .lists {
      .home_service__item {
        width: 6.9rem;
        height: 1.87rem;
        margin-bottom: 0.21rem;
        box-shadow: #eee 0.02rem 0.02rem 0.1rem;
        .bg {
          width: 1.87rem;
          height: 1.87rem;
          background-size: cover;
          background-position: center;
        }
        .infor {
          width: 5.02rem;
          text-align: left;
          padding: 0 0.2rem;
          .name {
            font-size: 0.3rem;
            padding: 0.3rem 0 0.2rem;
            line-height: 1;
            height: 0.8rem;
          }
          .descp {
            font-size: 0.22rem;
            color: #666;
            margin-bottom: 0.21rem;
            line-height: 1;
            height: 0.3rem;
          }
          .num {
            .price {
              font-size: 0.28rem;
              color: #ff344c;
              small {
                font-size: 0.22rem;
                color: #999;
                margin-left: 0.1rem;
                text-decoration: line-through;
              }
            }

            .salenum {
              font-size: 0.22rem;
              color: #999;
            }
          }
        }
      }
    }
  }
}
</style>